<template>
  <div class="hello">
    <li @touchmove.prevent>
      <div class="slider">
        <div class="slider_container" ref='container' :style="{width: container+'px'}">
          <!-- 左手 -->
          <div class="num" :style="{left: dis+'px'}" v-if="price !=0">￥{{price.toFixed(0)}}</div>
          <div class="progress" ref='singleDom' :style="{width: dis+'px'}"></div>
          <div :style="{left: dis+'px'}" class="btn" ref='btn' @touchstart="robTicketTouchStart" @touchmove="robTicketTouchMove">
            <img src="../assets/yuan@2x.png" alt="">
          </div>
          <!-- 右手 -->
          <div class="numR" :style="{right: disR+'px'}" v-if="priceR != 600">￥{{(600 - Math.abs(priceR)).toFixed(0)}}</div>
          <div class="progressR" :style="{width: disR+'px'}"></div>
          <div :style="{right: disR+'px'}" class="btnRight" @touchstart="robTicketTouchStartRight" @touchmove="robTicketTouchMoveRight">
            <img src="../assets/yuan@2x.png" alt="">
          </div>
          <div class="progress__value"></div>
        </div>
      </div>
    </li>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: '小小的子组件',
        robTicketSpeedUpStartX: 0,
        nowWidth: 0,
        lastWidth: 0,
        robTicketSpeedUpStartR: 0,
        nowWidthR: 0,
        lastWidthR: 0,
        dis: 0,
        priceR: 600,
        disR: 0,
        container: 0,
        price: 0,
        isMove:true,
        clientWidth:0
      }
    },
    methods: {
      robTicketTouchStart(e) { //bear
        this.robTicketSpeedUpStartX = e.touches[0].clientX;
        this.nowWidth = this.lastWidth;
      },

      robTicketTouchMove(e) { //手指移动//bear
        var currentX = e.touches[0].clientX; //获取滑动的位置
        var dis = currentX - this.robTicketSpeedUpStartX + this.nowWidth; //距离差值
        var price = this.dis * 600 / (600 * this.clientWidth / 750);
        this.price = Math.round(price / 50) * 50;
        //如果最大最小价格相差50，禁止滑动
        if (((600 + this.priceR >= 600) ? 600 : (600 + this.priceR)) - this.price <= 50) {
          this.isMove = false
        } else {
          this.isMove = true
        }
        if (this.isMove || this.dis > dis) {
          if (dis < 0) {//是否到达最两端
            dis = 0;
            this.price = 0;
          } else if (dis > 600 * this.clientWidth / 750) {
            dis = this.container - 10;
            this.price = 0
          }
          this.dis = dis;
          this.lastWidth = dis;
        }
      },
      robTicketTouchStartRight(e) { //右手
        this.robTicketSpeedUpStartR = e.touches[0].clientX;
        this.nowWidthR = this.lastWidthR;
      },
      robTicketTouchMoveRight(e) {


        var currentX = e.touches[0].clientX; //获取滑动的位置
        var dis = currentX - this.robTicketSpeedUpStartR + this.nowWidthR; //距离差值
        //第一个600价格 第二个价格条宽 屏幕宽  设计图宽
        var price = -this.disR * 600 / (600 * this.clientWidth / 750);
        this.priceR = Math.round(price / 50) * 50;
        if (dis > 0) {
          dis = 0;
          this.priceR = 600;
        } else if (dis < -600 * this.clientWidth / 750) {
          // dis = -600 * this.clientWidth / 750 + 10;
          // this.priceR = 0
        }
        if (this.isMove || this.disR > -dis) {
          this.disR = -dis;
          this.lastWidthR = dis;
        }
      },
    },
    watch: { //
      priceR() {//监听右手价格
        if (((600 + this.priceR >= 600) ? 600 : (600 + this.priceR)) - this.price <= 50) {
          this.isMove = false
        } else {
          this.isMove = true
        }
      }
    },
    created() {
        this.clientWidth = document.body.clientWidth;//手机屏宽
    },
    mounted() {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .slider {
    margin: 20px auto;
    font-size: 0;
    display: flex;
    justify-content: center;
  }

  .slider_container {
    display: inline-block;
    width: 625px !important;
    height: 5px;
    /* background: #ccc; */
    background: #F73313;
    position: relative;
    border-radius: 4px;
  }

  .slider .num,
  .slider .numR {
    width: 64px;
    height: 33px;
    color: #FFFFFF;
    font-size: 20px;
    background: url(../assets/jiagekuang@2x.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slider .num {
    position: absolute;
    top: -50px;
    left: -40px;
  }

  .slider .numR {
    position: absolute;
    top: -50px;
    right: -40px;
  }

  .slider .btn {
    width: 40px;
    height: 40px;
    position: absolute;
    top: -20px;
    left: -20px;
    cursor: pointer;
    margin-top: 0;
  }

  .slider .btnRight {
    width: 40px;
    height: 40px;
    position: absolute;
    top: -20px;
    right: 20px;
  }

  .slider .btn img,
  .slider .btnRight img {
    width: 40px;
    height: 40px;
  }

  .progress {
    position: absolute;
    left: 0;
    top: 0;
    /* background: #f73313; */
    background: #CCCCCC;
    width: 0;
    height: 5px;
    border-radius: 4px;
  }

  .progressR {
    position: absolute;
    right: 0;
    top: 0;
    /* background: #f73313; */
    background: #CCCCCC;
    width: 0;
    height: 5px;
    border-radius: 4px;
  }

  .progress__value {
    display: inline-block;
    position: absolute;
    top: -8px;
    right: -80px;
    font-size: 15px;
    width: 70px;
  }
</style>
